본문으로 건너뛰기

23.08.25

오늘 한 일​

  • 데모데이 전 카공실록 개발
  • 블로그 세팅

카공실록

내일 데모데이를 앞두고 카공실록을 개발했다. 프론트 윤지 누나랑 오후 9시부터 새벽 4시까지 같이 개발했다.

Suspense를 걸어야할 때와 걸지 말아야할 때를 구분하자​

나는 모든 커스텀 쿼리 훅들을 useSuspenseQuery로 감싸서 사용했다. 그런데 이렇게 하면 안되는 경우가 있다.

요청에 실패해도 렌더링이 되어야할 때​

Suspense를 걸어두어 폴백이 렌더링되는 상황에서 요청이 실패하면 상위 컴포넌트에서 에러를 잡아서 처리해줘야한다.

하지만 실패해도 렌더링이 되어야하는 경우에는 번거로워진다.


카공실록에서는 유저 정보를 가져와서 그 정보가 존재하면 유저 정보를 렌더링하고, 존재하지 않으면 그 자리에 다른 UI를 렌더링한다.

이 커스텀 쿼리 훅을 한 곳에서만 사용한다면 상관 없겠지만, 여러 곳(컴포넌트)에서 사용한다면 그에 맞는 처리를 각각 해줘야한다.

처음에는 이런 방식으로 쿼리 훅을 구현했었다.

import { getUserInfo } from './apis';
import { Keys } from './keys';
import { isLogin } from '@/utils/isLogin';
import { useSuspenseQuery } from '@suspensive/react-query';

import type { UserInfoParams } from './types';

export function useGetUserInfo(params: UserInfoParams) {
  return useSuspenseQuery(Keys.userInfo(params), () => getUserInfo(params), {
    enabled: isLogin(),
  });
}

enabled 옵션을 통해 로그인 상태일 때만 쿼리를 요청하도록 했다. 하지만 로그인 상태를 확인하는 유틸인 isLogin은 accessToken이 존재하는지만 확인하기 때문에, 존재하지 않으면 false를 반환해서 쿼리가 요청되지 않는다.

하지만 이렇게 되면 accessToken을 재발급하는 상황이 오지 않을 수 있다. 저 쿼리를 요청했을 때 실패해야 retry 로직이 동작해서 accessToken을 재발급하는데, 쿼리가 요청되지 않으면 retry 로직이 동작하지 않는다.

그래서 useSuspenseQuery를 사용하지 않고 useQuery를 사용했다.

import { getUserInfo } from './apis';
import { Keys } from './keys';
import { useQuery } from 'react-query';

import type { UserInfoParams } from './types';

export function useGetUserInfo(params: UserInfoParams) {
  return useQuery(Keys.userInfo(params), () => getUserInfo(params));
}

이제 요청을 했을 때 실패한다 해도 렌더링이 되고, retry 로직도 동작하게 된다.

Suspense가 필요한 경우에만 useSuspenseQuery를 사용하고, 그렇지 않은 경우에는 useQuery를 사용하도록 하자.

이미지 업로드한 썸네일 컴포넌트가 리렌더링 시 이미지가 깜빡이는 이슈​

textarea에 입력할 때마다 썸네일 컴포넌트가 리렌더링되면서 이미지가 깜빡이는 이슈가 있었다.

이미지 업로드 후 썸네일 컴포넌트가 리렌더링되면서 이미지가 깜빡이는 이슈는 useMemo를 사용해서 해결했다.

그래서 그 컴포넌트를 memo로 감싸서 리렌더링을 방지하고, prop으로 들어가는 핸들러 함수들도 useCallback으로 감싸서 리렌더링을 방지했다.

gatsby 블로그 세팅

오늘 어느정도 세팅이 마무리된 것 같다.

작성한 페이지가 제대로 나오지 않는 문제가 있었는데 알고보니 graphQL에서 쿼리를 잘못 작성해서 그런 것이었다. graphQL이 어떻게 동작하는지 잘 모르고 다른 블로그들을 참고해서 작성했었는데, graphQL에 대해 확실하게 이해하고 사용해야겠다.

디자인 시스템..? 🤔​

디자인 시스템을 구축하려고 했지만, 나는 디자이너가 아니다보니 감이 잘 안온다. 그래서 살짝 방법을 바꾸려고 한다.

디자인 시스템이 아닌, 그냥 어느 곳에서나 사용할 수 있는 base 컴포넌트들(레이아웃 같은)과 컬러, 타이포그래피 정도만 패키지로 만들어서 사용하려고 한다.

유틸 타입들을 정의해둔 패키지도 만들어서 사용하면 좋을 것 같다.

블로그를 어떻게 디자인할지 고민 좀 해봐야겠다..

내일 할 일​

  • 프로그라피 데모데이